<template>
  <div class="goods-list">
    <tab class="list-tab" 
        custom-bar-width="1.7rem"
        bar-active-color="#172F6D"
        >
      <tab-item selected @on-item-click="onItemClick">全部</tab-item>
      <tab-item @on-item-click="onItemClick">待发货</tab-item>
      <tab-item @on-item-click="onItemClick">已发货</tab-item>
    </tab>
    <div class="list">
      <div class="item" @click="router({path: './goodsOrderDetails'})">
        <img src="@/assets/bolanglang.png" class="bolang" alt="">
        <div class="top">
          <p class="time">2018.11.12 18:50</p>
          <p class="status">待发货</p>
        </div>
        <div class="goods">
          <div class="img">
            <img src="@/assets/gouwuche02.png">
          </div>
          <div class="title">
            <p class="tip">Naef Cublex立方体创意魔创意魔...创意魔...创意魔...创意魔...</p>
            <p class="num">数量:1</p>
          </div>
          <div class="price">¥368</div>
        </div>
        <p class="all-price">总计金额: ￥199.00(含运费：¥0.00)</p>
      </div>
      <div class="item">
        <img src="@/assets/bolanglang.png" class="bolang" alt="">
        <div class="top">
          <p class="time">2018.11.12 18:50</p>
          <p class="status">待发货</p>
        </div>
        <div class="goods">
          <div class="img">
            <img src="@/assets/gouwuche02.png">
          </div>
          <div class="title">
            <p class="tip">Naef Cublex立方体创意魔创意魔...创意魔...创意魔...创意魔...</p>
            <p class="num">数量:1</p>
          </div>
          <div class="price">¥368</div>
        </div>
        <p class="all-price">总计金额: ￥199.00(含运费：¥0.00)</p>
      </div>
    </div>
  </div>
</template>

<script>

  import { Tab, TabItem } from 'vux'

  export default {
    components: {
      Tab,
      TabItem,
    },
    data () {
      return {
        is_check: true
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        console.log('on item click:', index)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.goods-list
  width 100%
  height 100vh
  overflow hidden
  background-color #f5f5f5
  .list-tab
    padding-top 5rem
    margin-bottom 1rem
    .vux-tab-container
      height 5rem
      .vux-tab-item.vux-tab-selected
        font-weight 500
        color #333
      .vux-tab-item
        color #999
        font-size 1.6rem
        font-weight 400
  .item
    background-color #fff
    position relative
    margin-bottom 1rem
    padding 0 1.5rem
    .bolang
      position absolute
      width 100%
      bottom -.3rem
      left 0
    .top
      line-height 4.5rem
      overflow hidden
      border-bottom 1px solid #e6e6e6
      .time
        float left
        color #999
        font-size 1.5rem
      .status
        float right
        color #333
        font-size 1.5rem
    .goods
      display flex
      background-color #fff
      padding 1.5rem 0
      border-bottom 1px solid #e6e6e6
      .img
        min-width 9.4rem
        max-width 9.4rem
        height 7rem
        margin-right 1rem
      .title
        position relative
        flex 5
        .tip
          font-size 1.5rem
          color #333
          font-weight 500
          width calc(100vw - 17.4rem)
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
        .num
          color #333
          font-size 1.2rem
          line-height 1.6rem
          position absolute
          top 3rem
      .price
        flex 1
        text-align right
        line-height 2.1rem
        font-size 1.5rem
        font-weight 500
        color #A81E27
    .all-price
      line-height 5rem
      height 5rem
      color #333
      font-size 1.5rem
</style>
